<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title><!--{$lang.page.index.title}--></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/lay/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/lay/layui/index.css" media="all">
</head>
<body id="timer">
<div style="padding-top: 20px">
    <div class="layui-text-item" style="text-align: center;"><b><!--{$lang.page.public.control}--></b></div>
      <div class="layui-card-body">
        <form name="addItem" method="post" lay-filter="component-form-group" class="layui-form">
          <input type="hidden" value="<!--{$datainfo.id}-->" id="id">
          <div class="layui-text-item">
              <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.name}--></label>
                <div class="layui-text-inline">
                  <!--{$datainfo.title}-->
                </div>
              </div>
              <div class="layui-text-line">
                <label class="layui-text-label">ID</label>
                <div class="layui-text-inline">
                  <!--{$datainfo.id}-->
                </div>
              </div>
              <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.status}--></label>
                <div class="layui-text-inline">
                  <!--{if $datainfo.status==1}-->
                  <button class="layui-btn layui-btn-xs" type="button"><!--{$lang.page.table.normal}--></button>
                  <!--{elseif $datainfo.status==2}-->
                  <button class="layui-btn layui-btn-green layui-btn-xs" type="button"><!--{$lang.page.table.finish}--></button>
                  <!--{elseif $datainfo.status==3}-->
                  <button class="layui-btn layui-btn-primary layui-btn-xs" type="button"><!--{$lang.page.table.tovoid}--></button>
                  <!--{/if}-->
                </div>
              </div>
              <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.public.control}--></label>
                <div class="layui-text-inline" style="margin-top:-10px">
                  <input type="radio" name="win" value="0" title="<!--{$lang.page.public.nocontrol}-->" <!--{if $datainfo.win eq 0}--> checked<!--{/if}-->  >&nbsp;&nbsp;<input type="radio" name="win" value="1" title="<!--{$lang.page.table.upwin}-->" <!--{if $datainfo.win eq 1}--> checked<!--{/if}-->  >&nbsp;&nbsp;<input type="radio" name="win" value="2" title="<!--{$lang.page.table.downwin}-->" <!--{if $datainfo.win eq 2}--> checked<!--{/if}-->>
                </div>
              </div>
          </div> 
          <div class="layui-text-item">
            <div>
              <div style="left: 0;">
                <div class="layui-text-line">
                  <label class="layui-text-label"><!--{$lang.page.table.direction}--></label>
                  <div class="layui-input-block" id="status"></div>
                </div>
                <div class="layui-text-line">
                  <label class="layui-text-label"><!--{$lang.page.table.hedging}--></label>
                  <div class="layui-input-block"><input type="text" name="money" id="money" style="width:100px; height: 22px; border:1px solid #bdbdbd; padding: 0 10px; border-radius: 3px " value="50" ></div>
                  <button class="layui-btn layui-btn-xs" type="button" id="submit"><!--{$lang.page.public.submit}--></button>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="layui-text-item">
            <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.buyingp}--></label>
                <div class="layui-text-inline" id="buyingp"></div>
            </div>
            <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.sellingp}--></label>
                <div class="layui-text-inline" id="sellingp"></div>
            </div>
            <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.nowprice}--></label>
                <div class="layui-text-inline" id="newprice"></div>
            </div>
            <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.public.countdown}--></label>
                <div class="layui-text-inline" id="countdown"></div>
            </div>
            <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.buyup}--><!--{$lang.page.table.money}--></label>
                <div class="layui-text-inline layui-btn layui-btn-xs layui-btn-danger" id="upsum"></div>
            </div>
            <div class="layui-text-line">
                <label class="layui-text-label"><!--{$lang.page.table.buydown}--><!--{$lang.page.table.money}--></label>
                <div class="layui-text-inline layui-btn layui-btn-xs layui-btn-green" id="downsum"></div>
            </div>
        </div>
        <div style="padding: 0px 40px; display: flex; justify-content: space-between;" id="content"></div>
    </div>
</div>
<script src="/static/lay/layui/layui.js"></script>
  <script type="text/javascript">
    layui.config({
     base: '/static/lay/' //静态资源所在路径
   }).extend({
     xadmin: 'lib/xadmin' //弹窗
   }).use(['jquery', 'layer','xadmin', 'form', 'element'], function(){
    var $ = layui.$ //引用jq
    var layer = layui.layer; //独立版的layer无需执行这一句
    var form = layui.form;
     form.render(null, 'component-form-group');
     /* 自定义验证规则 */
    form.verify({
      title: function(value){
        if(value.length < 1){
          return '<!--{$lang.page.table.name}--> <!--{$lang.page.public.nocontent}-->';
        }
      }
      ,double: function(value){
        if(/^\d+$/.test(value)==false && /^\d+\.\d+$/.test(value)==false)
        {
            return '<!--{$lang.page.public.paraerror}-->';
        }
      }
      ,description: function(value) {
          return layedit.sync(description);
        }
    });
    $('#timer').ready(function(){
        id=$('#id').val();
        let setInt=setInterval(() => {
            $.post('getcontrol',{id:id},function(res){
                if(res.code == 200){
                  $('#buyingp').text(res.data.trade.price[0]);
                  $('#sellingp').text(res.data.trade.price[res.data.trade.finalpoint]);
                  $('#newprice').text(res.data.trade.newprice);
                  $('#countdown').text(res.data.trade.endtime);

                  var html = ''; var upsum=0; var downsum=0; var status='--';
                  html += '<div style="width:46%">';
                  html += '<button class="layui-btn layui-btn-xs layui-btn-danger" type="button">漲</button><table class="layui-table" lay-filter="table"><thead><tr><td>會員賬戶</td><td width="30%">金額</td><td width="30%">用戶性質</td></tr></thead><tbody>';
                  res.data.orderup.forEach((item,index)=>{
                    upsum += Number(item.money);
                    html +='<tr>'
                      +'<td>'+item.username+'</td>'
                      +'<td>'+item.money+'</td>';
                      if(item.utype==1){
                        html +='<td>用戶</td>';
                      }else{
                        html +='<td>機器人</td>';
                      }
                      html +='</tr>'
                  })
                  html += '</tbody></table></div>';
                  html += '<div style="width:46%">';
                  html += '<button class="layui-btn layui-btn-xs layui-btn-green" type="button">跌</button><table class="layui-table" lay-filter="table"><thead><tr><td>會員賬戶</td><td width="30%">金額</td><td width="30%">用戶性質</td></tr></thead><tbody>';
                  res.data.orderdown.forEach((item,index)=>{
                    downsum += Number(item.money);
                    html +='<tr>'
                      +'<td>'+item.username+'</td>'
                      +'<td>'+item.money+'</td>';
                      if(item.utype==1){
                        html +='<td>用戶</td>';
                      }else{
                        html +='<td>機器人</td>';
                      }
                      html +='</tr>'
                  })
                  html += '</tbody></table></div>';
                  $('#content').html(html);
                  $('#upsum').text(upsum.toFixed(1));
                  $('#downsum').text(downsum.toFixed(1));
                  if((res.data.trade.newprice)-(res.data.trade.price[0])>0){
                      status='<span style="color:#ff0000;font-size: 18px; font-weight: bold;">↑</span>';
                      $('#money').val(upsum);
                  }else if((res.data.trade.newprice)-(res.data.trade.price[0])<0){
                      status='<span style="color:#298f00;font-size: 18px; font-weight: bold;">↓</span>';
                      $('#money').val(downsum);
                  }else{
                      status='--';
                  }
                  $('#status').html(status);
                }else{
                    layer.msg(res.msg);
                    clearInterval(setInt);
                }
            })  
        },1000)  
    });
  });

  </script>
</body>
</html>

